<template>
	<view class="correction">
		<view class="header">

		</view>
		<!-- 选择题和选项 -->
		<view class="choice">
			<view class="">
				<text class="shu"></text><text class="select">单选题</text>
			</view>
			<view class="content">
				<view class="select-title">
					{{title}}：（ ）
				</view>
				<view class="select-options">
					<view class="select-options-one" :class="{isSub:currIndex==item.id}" v-for="item in selectOptions"
						:key="item.id" @click="selectOptionone(item)">
						{{item.option}}
					</view>

				</view>
			</view>
		</view>
		<!-- 提交 -->
		<view class="sub">
			<button class="submit btn" @click="subWrongBook">提交答题</button>
			<button class="goon btn" @click="gotoWQBook">继续纠错</button>
		</view>
		<view class="footer">
			<image class="footerimg" src="https://wlsy.nanjingyunpeng.cn/weixin/image/footerImg.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		questiondetail,
		editwrongBook
	} from "../../api/api.js"
	const audio = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				option: ["A", "B", "C", "D"],
				selectOptions: [],
				title: "",
				answer: "",
				currIndex: "",
				qid: "",
				answe: "",
				use: ""
			}
		},
		onLoad: function(option) {
			console.log("data", option);
			this.qid = option.qid
			this.questiondetail(option.id)
		},
		methods: {
			gotoWQBook() {
				uni.redirectTo({
					url: '/pages/center/WQBook'
				});
			},
			async questiondetail(val) {
				let res = await questiondetail({
					id: val
				})
				console.log("题目详情", res)
				if (res.code == 1000) {
					this.answer = res.data.answer
					this.title = res.data.question
					this.selectOptions.push({
						id: 1,
						option: 'A：' + res.data.optiona
					})
					this.selectOptions.push({
						id: 2,
						option: 'B：' + res.data.optionb
					})
					this.selectOptions.push({
						id: 3,
						option: 'C：' + res.data.optionc
					})
					this.selectOptions.push({
						id: 4,
						option: 'D：' + res.data.optiond
					})

				}
			},
			selectOptionone(val) {
				this.currIndex = val.id
				this.use = val.option.substring(2)
				console.log(val, this.use, this.answer)
			},
			//提交答题
			async subWrongBook() {
				if (this.answer == this.use) {
					audio.src ="/static/audio/correct.mp3";
					audio.play();
					let user_question_select = ""
					// console.log("qid", this.qid, this.currIndex)
					user_question_select = this.option[this.currIndex-1]
					// console.log("qid", this.qid, this.currIndex, user_question_select)
					let res = await editwrongBook({
						qid: this.qid,
						user_question_select: user_question_select
					})
					// console.log("纠错答题", res)
					if (res.code == 1000) {
						uni.showToast({
							title: '提交成功',
							duration: 2000,
							icon: "none",
						});
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/problem/WQBook"
							});
						}, 1000)
					}

				} else {
					audio.src ="/static/audio/wrong.mp3";
					audio.play();
					uni.showModal({
						title: '提示',
						content: '答案不正确，请选择正确答案',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

			},

		}
	}
</script>

<style scoped lang="scss">
	.correction {
		min-width: 100%;
		min-height: 100%;
		background-color: #EEF7FE;
		padding: 30rpx;
		padding-top: 70rpx;
		box-sizing: border-box;

		.header {
			width: 750rpx;
			height: 40rpx;
			background: #466EE7;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: fixed;
			top: 0;
			left: 0;
		}

		.choice {
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 8rpx 0px rgba(51, 51, 51, 0.05);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			padding: 30rpx;
			box-sizing: border-box;

			.shu {
				display: inline-block;
				width: 8rpx;
				height: 28rpx;
				background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				opacity: 1;
			}

			.select {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 38rpx;
				margin-left: 10rpx;
			}

			.content {
				margin-top: 10rpx;

				.select-title {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 36rpx;
				}

				.select-options {
					margin-top: 30rpx;

					.select-options-one {
						width: 630rpx;
						background: #F7F8FA;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						opacity: 1;
						margin-bottom: 20rpx;
						line-height: 38rpx;
						padding-left: 30rpx;
						padding: 30rpx;
						box-sizing: border-box;
					}

					.isSub {
						background: #4B73EA;
						color: #FFFFFF;
					}
				}
			}
		}

		.sub {
			margin-top: 90rpx;
			width: 690rpx;
			padding-left: 50rpx;
			box-sizing: border-box;

			.btn {
				width: 240rpx;
				height: 80rpx;
				opacity: 1;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36rpx;
				line-height: 80rpx;
				display: inline-block;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.submit {
				background: linear-gradient(135deg, #F3B96D 0%, #FF5D29 100%);
				margin-right: 90rpx;
			}

			.goon {
				background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
			}
		}

		.footer {
			width: 750rpx;
			height: 324rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.footerimg {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
